import { useLocation, useNavigate, Outlet } from 'react-router-dom'
import { useEffect } from 'react'
// utils
import cookie from 'react-cookies'
import { MessageProvider } from './component/context/messageContext/message'
import { GlobalProvider } from './component/context/globalContext'

function App() {
  const location = useLocation()
  const navigate = useNavigate()

  useEffect(() => {
    const verifyAccess = async () => {
      const token = cookie.load('token')
      if (!token && location.pathname !== '/login') {
        navigate('/login', { replace: true })
      } else if (token && location.pathname === '/login') {
        navigate('/home', { replace: true })
      }
    }
    verifyAccess()
  }, [location, navigate])
  return (
    <MessageProvider>
      <GlobalProvider>
        <div>
          <Outlet></Outlet>
        </div>
      </GlobalProvider>
    </MessageProvider>
  )
}

export default App
